<template>
  <div class="m-4">
    <div style="height: 77vh" class="flex flex-wrap bg-white p-2 overflow-y-auto">
      <div class="full-page" v-if="total == 0">
        <Empty :image="simpleImage" />
      </div>

      <!--  列表  -->
      <div class="full-width change-bg" v-for="sj_name in rowData.items">
        <div class="line-title title-bg">
          {{ sj_name._id }} ({{ sj_name.line_count_total }})
          <Tag
            v-if="sj_name.line_count_total > 5"
            class="ml-20"
            color="cyan"
            @click="showProductInfo(sj_name._id, sj_name.line_count_total, rowData.catId)"
          >
            查看所有{{ sj_name.line_count_total }}个产品
          </Tag>
        </div>

        <div class="line-flex">
          <div
            style="width: 20%"
            class="flex-item p-1"
            v-for="(item, index) in sj_name.top_four_items"
          >
            <Card hoverable class="cw-card">
              <div class="badge-ribbon"
                >{{
                  '#' +
                  ((searchInfo.page - 1) * searchInfo.pageSize + index + 1) +
                  '   单量(' +
                  item.order_num +
                  ')' +
                  '   单数(' +
                  item.order_counts +
                  ')'
                }}
              </div>
              <template #cover>
                <Image
                  class="flex justify-center"
                  width="120"
                  :height="200"
                  fallback="http://wt-shop.com/storage/images/2024-03/header.jpg"
                  :src="item.image"
                />
              </template>
              <Tooltip @click="keepa_detail({ domain_id: item['domain_id'], asin: item['asin'] })">
                <template #title>{{ item.title }}</template>
                <CardMeta :title="item.title" :description="item.asin" />
              </Tooltip>
              <div class="mt-10px white-wrap">
                <Tooltip placement="topLeft" :title="item.category_tree">
                  分类树：{{ item.category_tree }}
                </Tooltip>
              </div>
              <div class="flex-wt">
                <div>
                  <Tag v-if="item.group_name" color="green">{{ item.group_name }}</Tag>
                </div>
                <div
                  ><span class="price">{{ item.buy_box_current }}</span
                  ><span style="margin-left: 6px"
                    >({{ translateCoinType(item.domain_id) }})
                  </span></div
                >
              </div>
              <div v-if="item.sj_name" class="mt-6px">
                <Tag color="red">{{ item.sj_name }}</Tag>
              </div>
              <div v-else class="mt-6px">
                <Tag color="cyan">无数据名</Tag>
              </div>
              <Rate size="5" v-model:value="item.reviews_rating" disabled allow-half />
              <span class="star-rating"
                >{{ item.reviews_rating }}({{ item.reviews_review_count }})</span
              ><br />
            </Card>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white p-1 text-right">
      <Pagination
        v-if="total > 0"
        :show-total="(total) => `总计 ${total} 条`"
        size="small"
        :defaultPageSize="20"
        :pageSizeOptions="['20']"
        v-model:pageSize="pageSize"
        v-model:current="searchInfo.page"
        show-quick-jumper
        :total="total"
        @change="onChange"
      />
    </div>
    <BasicModal
      @keepaDetail="keepa_detail"
      @register="register"
      :modalData="modalData"
      @visible-change="setModalData"
    />
  </div>
</template>
<script lang="ts" setup>
  import { translateCoinType } from '/@/utils/common'
  import BasicModal from './Modal.vue'
  import {
    FormInstance,
    Select,
    SelectOption,
    Empty,
    DatePicker,
    Rate,
    Card,
    CardMeta,
    Avatar,
    Image,
    Form,
    FormItem,
    Row,
    Col,
    Pagination,
    Button,
    Tooltip,
    Tag,
  } from 'ant-design-vue'
  import { reactive, ref } from 'vue'
  import { DownOutlined, UpOutlined, SearchOutlined } from '@ant-design/icons-vue'
  import { useModal } from '/@/components/Modal'
  import { getProductBySjNameGroup } from '/@/api/demo/product'

  const [register, { openModal: openProductModal, setModalProps }] = useModal()
  const props = defineProps({
    rowData: Object,
    searchInfo: Object,
    total: Number,
    current: Number,
  })
  const emit = defineEmits(['pageClick'])
  const visible = ref<boolean>(false)
  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  const pageSize = ref<number>(20)
  const expand = ref(false)
  const isEmpty = ref(true)
  const modalData = ref([])

  /**
   * 查看数据名产品组内信息
   * @param sj_name
   */
  function showProductInfo(sj_name, count, catId) {
    console.log(props.searchInfo)
    var formState = {
      sj_name: sj_name,
      catId: catId,
      month_range: props.searchInfo.month_range,
      domainId: props.searchInfo.domainId,
    }
    openProductModal()
    setModalProps({ loading: true })
    getProductBySjNameGroup(formState).then(
      (res) => {
        modalData.value = {
          data: res,
          title: sj_name + '( ' + count + ' )',
        }
        setModalProps({ loading: false })
      },
      (error) => {
        console.log(error)
      },
    )
  }

  /**
   * 关闭前清空模态框数据
   * @param visible
   */
  function setModalData(visible) {
    if (!visible) {
      modalData.value = []
    }
  }

  const keepa_detail = (item) => {
    const keepa_url = 'https://keepa.com/#!product/'
    var keepa_detail = item.domain_id + '-' + item.asin
    console.log(keepa_detail)
    window.open(keepa_url + keepa_detail, '_blank')
  }

  const onChange = (pageNumber: number) => {
    emit('pageClick', pageNumber)
  }
</script>
<style scoped>
  .ml-20 {
    margin-left: 10px;
    cursor: pointer;
  }
  .full-width {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    padding-top: 6px;
  }

  .line-title {
    margin-left: 5px;
    padding: 10px;
    border-radius: 4px;
    margin-top: 4px;
    font-size: 18px;
    font-weight: 600;
  }

  .line-flex {
    width: 100%;
    display: flex;
  }

  .flex-wt {
    display: flex;
    justify-content: space-between;
  }

  .mt-6px {
    margin-top: 6px;
  }

  .mt-10px {
    margin-top: 10px;
  }

  .cw-card {
    position: relative;
  }

  .badge-ribbon {
    position: absolute;
    right: 5px;
    top: 5px;
    background: #ee4f12;
    padding: 2px 5px;
    border-radius: 4px;
    color: white;
  }

  .full-page {
    width: 100%;
    height: 100%;
    padding-top: 15%;
  }

  .search-flex {
    display: flex;
  }

  .ant-image-img {
    max-height: 200px;
    width: auto !important;
  }

  .ant-image {
    display: flex !important;
    justify-content: center;
    padding: 2px 0;
  }

  .anticon-star {
    width: 12px;
  }

  .anticon-star svg {
    width: 16px;
  }

  .star-rating {
    vertical-align: text-bottom;
    margin-left: 8px;
    font-size: 13px;
    font-weight: 500;
  }

  .price {
    margin-left: 10px;
    font-size: 15px;
    font-weight: 500;
    color: red;
  }
</style>
